import React, {Component} from 'react';
import {View, Text, Image, TextInput} from 'react-native';
import Header from "../../../../components/header";
import {inject, observer} from "mobx-react";
import {ListItem,Overlay} from "react-native-elements";
import {pxToDp} from "../../../../utils/styleKits";
import ImagePicker from "react-native-image-crop-picker";
import {Button} from "teaset";
import Toast from "../../../../utils/Toast.js";
import userInfo from "../../../../mobx/userInfo";
import DatePicker from "react-native-datepicker";
// 第三方图标
import Icon from 'react-native-vector-icons/FontAwesome';
import {screenWidth} from '../../../../utils/styleKits.js';
import Picker from "react-native-picker";
import cityJson from "../../../../utils/citys";

@inject('UserInfoStore')
@observer
class Index extends Component {
  state = {
    userInfo: {},
    isChangeNickname: false,
    isChangeIndustry: false
  };

  render() {
    let {userInfo, isChangeNickname, isChangeIndustry} = this.state;
    return (
      <View>
        <Header title={'编辑资料'} leftTitle={''} leftPress={this.leftPress}/>

        <ListItem bottomDivider onPress={this.chooseHeaderImg}>
          <ListItem.Content>
            <ListItem.Title>{'头像'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Image source={{uri: userInfo.headerImg}}
                   style={{width: pxToDp(50), height: pxToDp(50), borderRadius: pxToDp(25)}}/>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={()=>this.setState({isChangeNickname: true})}>
          <ListItem.Content>
            <ListItem.Title>{'昵称'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Text>{userInfo.nickname}</Text>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={()=>this.setState({isChangeBirthday: true})}>
          <ListItem.Content>
            <ListItem.Title>{'生日'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            {this.changeBirthday()}
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={this.gender}>
          <ListItem.Content>
            <ListItem.Title>{'选择性别'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Text>{userInfo.gender}</Text>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={this.pickerCity}>
          <ListItem.Content>
            <ListItem.Title>{'现居城市'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Text>{userInfo.location}</Text>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={this.education}>
          <ListItem.Content>
            <ListItem.Title>{'学历'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Text>{userInfo.education}</Text>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={this.income}>
          <ListItem.Content>
            <ListItem.Title>{'月收入'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Text>{userInfo.income}</Text>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={()=>this.setState({isChangeIndustry:true})}>
          <ListItem.Content>
            <ListItem.Title>{'行业'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Text>{userInfo.industry}</Text>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        <ListItem bottomDivider onPress={this.status}>
          <ListItem.Content>
            <ListItem.Title>{'婚姻状态'}</ListItem.Title>
          </ListItem.Content>
          <ListItem.Content style={{alignItems:'flex-end'}}>
            <Text>{userInfo.status}</Text>
          </ListItem.Content>
          <ListItem.Chevron />
        </ListItem>

        {this.changeNickname(isChangeNickname)}
        {this.changeIndustry(isChangeIndustry)}


      </View>
    );
  }

  componentDidMount(): void {
    let userInfo = this.props.UserInfoStore.userInfo;

    this.setState({
      userInfo
    })
  }

  // 顶部导航左边返回按钮
  leftPress = () => {
    let {userInfo} = this.state;
    this.props.UserInfoStore.setUserInfo(userInfo);
    // reset可刷新跳转的页面
    this.props.navigation.reset({
      routes:[{name:'tabBar',params:{pagename:'My'}}]
    })
  }

  // 修改行业
  changeIndustry = (isChangeIndustry) => {
    let {userInfo} = this.state;
    if (isChangeIndustry) {
      return <Overlay isVisible={isChangeIndustry} onBackdropPress={()=>this.setState({isChangeIndustry: false})}>
        <TextInput value={userInfo.industry}  onChangeText={(value)=>this.editIndustry(value)}

                   style={{width:screenWidth*0.8,borderWidth:pxToDp(1),borderColor:'#ddd',borderRadius:pxToDp(10)}}
        />
      </Overlay>
    }
  };

  editIndustry = (value) => {
    let {userInfo} = this.state;
    userInfo.industry = value;
    this.setState({
      userInfo
    })
  }

  // 修改婚姻状态
  status = () => {
    Picker.init({
      pickerData: ['未婚','已婚','单身','离异'],
      selectedValue: ['未婚'],
      wheelFlex: [1, 0, 0], // 显示性别
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择婚姻状态",
      onPickerConfirm: data => {
        // data =  ['未婚']
        let {userInfo} = this.state;
        userInfo.status = data[0];
        this.setState({userInfo});
      }
    });
    Picker.show();
  }

  // 收入
  income = () => {
    Picker.init({
      pickerData: ['50k以上', '40-50k', '30-40k','20-30k','10-20k','10k以下'],
      selectedValue: ['50k以上'],
      wheelFlex: [1, 0, 0], // 显示性别
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择收入",
      onPickerConfirm: data => {
        // data =  ['50k以上']
        let {userInfo} = this.state;
        userInfo.income = data[0];
        this.setState({userInfo});
      }
    });
    Picker.show();
  }

  // 选择性别
  gender = () => {
    Picker.init({
      pickerData: ['男', '女'],
      selectedValue: ['男'],
      wheelFlex: [1, 0, 0], // 显示性别
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择性别",
      onPickerConfirm: data => {
        // data =  ['博士后']
        let {userInfo} = this.state;
        userInfo.gender = data[0];
        this.setState({userInfo});
      }
    });
    Picker.show();
  };

  // 教育
  education = () => {
    Picker.init({
      pickerData: ['博士后', '博士', '硕士', '本科', '大专', '高中', '高中以下'],
      selectedValue: ['博士后'],
      wheelFlex: [1, 0, 0], // 显示城市
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择学历",
      onPickerConfirm: data => {
        // data =  ['博士后']
        let {userInfo} = this.state;
        userInfo.education = data[0];
        this.setState({userInfo});
      }
    });
    Picker.show();
  };

  // 选择地址
  pickerCity = () => {
    let {userInfo} = this.state;
    Picker.init({
      pickerData: cityJson,
      selectedValue: ['北京', '北京'],
      wheelFlex: [1, 1, 0], // 显示省和市
      pickerConfirmBtnText: "确定",
      pickerCancelBtnText: "取消",
      pickerTitleText: "选择城市",
      onPickerConfirm: data => {
        // data =  [广东，广州，天河]
        userInfo.location = data[1];
        this.setState(
          {
            userInfo
          }
        );
      }
    });
    Picker.show();
  };

  // 获取当前时间，年月日
  nowDate = (dateNow) => {
    if (typeof dateNow === "object"){
      return dateNow.getFullYear() + '-' + (dateNow.getMonth() + 1) + '-' + dateNow.getDate();
    } else if ( typeof dateNow === "string" && dateNow.length > 0) {
      return dateNow
    } else {
      return '请选择日期';
    }
  };

  // 修改生日
  changeBirthday = () => {
    let {userInfo} = this.state;
    return <DatePicker
      style={{width: '100%', paddingLeft: pxToDp(5)}}
      mode="date"
      placeholder={this.nowDate(userInfo.birthday)}
      maxDate={this.nowDate(new Date())}
      format="YYYY-MM-DD"
      confirmBtnText="Confirm"
      cancelBtnText="Cancel"
      iconComponent={<Text/>}
      androidMode="spinner"
      customStyles={{
        dateInput: {
          borderWidth: 0,
          alignItems: "flex-end",
        },
        placeholderText: {
          fontSize: pxToDp(16),
          color: '#444'
        }
      }}
      onDateChange={(date) => {
        userInfo.birthday = date;
        this.setState({userInfo})
      }}
    />
  };

  // 修改昵称
  changeNickname = (isChangeNickname) => {
    let {userInfo} = this.state;
    if (isChangeNickname) {
      return <Overlay isVisible={isChangeNickname} onBackdropPress={()=>this.setState({isChangeNickname: false})}>
        <TextInput value={userInfo.nickname}  onChangeText={(value)=>this.editNickname(value)}

                   style={{width:screenWidth*0.8,borderWidth:pxToDp(1),borderColor:'#ddd',borderRadius:pxToDp(10)}}
        />
      </Overlay>
    }
  };

  // 更新昵称
  editNickname = (value) => {
    let {userInfo} = this.state;
    userInfo.nickname = value;
    this.setState({userInfo})
  };

  //更换图片
  chooseHeaderImg = async () => {
    let image = await ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true
    });

    // 审核图片效果
    let overlayView = (
      <Overlay.View
        style={{flex: 1, backgroundColor: '#000'}}
        modal={true}
        overlayOpacity={0}
        ref={v => this.overlayViewRef = v}
      >
        <View style={{
          marginTop: pxToDp(30),
          width: pxToDp(334),
          height: pxToDp(334),
          position: 'relative',
          alignSelf: 'center',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
          <Image style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            left: 0,
            top: 0,
            zIndex: 100
          }} source={require('../../../../images/scan.gif')}/>
          <Image style={{width: '60%', height: '60%'}} source={{uri: image.path}}/>
          <Button title='Close' style={{
            position: 'absolute', alignSelf: 'center',
            bottom: pxToDp(-80), zIndex: 110
          }} onPress={() => {
            // 关闭审核页面
            this.overlayViewRef && this.overlayViewRef.close();
            // 弹框提示
            Toast.smile('恭喜 上传通过', 2000, 'center');
          }}/>
        </View>
      </Overlay.View>
    );
    Overlay.show(overlayView);
  };
}

export default Index;